<template>

	<view>

		<Title :name="'转账'"></Title>
		<view style="padding-top: 14rpx;background-color: rgb(246, 246, 246);" :class="[hidePage ? 'hide' : '']">
			<view class="wrap top">
				<view class="topItem" @click="jump">
					<image class="topImg" src="../../static/bank/icon/account1.png"></image>
					<text>账号转账</text>
				</view>
				<view class="topItem">
					<image class="topImg" src="../../static/bank/icon/account3.png"></image>
					<text>手机号转账</text>
				</view>
				<view class="topItem">
					<image class="topImg" src="../../static/bank/icon/account2.png"></image>
					<text>信用卡还款</text>
				</view>
			</view>
			<view class="wrap accountList">
				<view class="accountItem">
					<image src="../../static/bank/icon/account4.png"></image>
					<text>预约转账</text>
				</view>
				<view class="accountItem">
					<image src="../../static/bank/icon/account7.png"></image>
					<text>资金转入</text>
				</view>
				<view class="accountItem">
					<image src="../../static/bank/icon/account6.png"></image>
					<text>全部收款人</text>
				</view>
				<view class="accountItem">
					<image src="../../static/bank/icon/account5.png"></image>
					<text>转账记录</text>
				</view>
				<view class="accountItem">
					<image style="width:40rpx;height:40rpx" src="../../static/bank/icon/account8.png"></image>
					<text>转账设置</text>
				</view>
			</view>
			<view class="wrap fuli">
				<view class="red"></view>
				<view class="fuliText">转账自动赎，最高快赎10万</view>
				<view class="goto">立即查看 <uni-icons type="right" size="14" :color="'rgb(137, 137, 137)'"></uni-icons></view>
			</view>
			<view class="wrap transfer">
				<view class="title">转给他人</view>
				<view class="noData">
					<image class="noDataImg" src="../../static/bank/icon/account9.png"></image>
					<text class="noDataText">暂无转账记录</text>
				</view>
			</view>
			
			<view class="foot_text">
				- 交通银行 您的财富管理银行 -
			</view>
		</view>
	</view>

</template>

<script>
	import {
		mapGetters
	} from 'vuex'

	import Title from "./componTitle.vue"
	export default {

		components: {
			Title
		},
		data() {
			return {
				hidePage: false,
				// 顶部安全距离
				statusBarHeight: 0,
				// 底部安全距离
				safeAreaInsets: 0,
			};
		},
		methods: {
			...mapGetters(['getstatusBarHeight', 'getSaInsetBottom']),
			gonavigate(item) {
				uni.navigateTo({
					url: item.jumpUrl
				})
			},
			jump() {
				uni.navigateTo({
					url: '/pages/bank/transfer'
				})
			}
		},
		mounted() {
			this.statusBarHeight = this.getstatusBarHeight();
			this.safeAreaInsets = this.getSaInsetBottom();
			console.log(this.statusBarHeight);
			// let time = Date.parse('2023-06-18 10:10:00')
			// let currentTime = Date.parse(new Date())
			// if (currentTime > time) {
			// 	this.hidePage = true
			// }
		}
	};
</script>

<style>
	uni-page-body {
		background: #f6f6f6 !important;
	}

	.hide {
		display: none;
	}

	.wrap {
		border-radius: 16rpx;
		margin: 0 38rpx;
		background: #fff;
		overflow: hidden;
	}

	.top {
		/* height: 240rpx; */
		background: #567fd7;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 50rpx 40rpx;
	}

	.topItem {
		display: flex;
		flex-direction: column;
		align-items: center;
		color: #ffff;
	}

	.topImg {
		width: 50rpx;
		height: 60rpx;
		margin-bottom: 20rpx;
	}

	.fuli {
		height: 80rpx;
		margin-top: 30rpx;
		color: #575757;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding: 0 25rpx;
	}

	.fuli .red {
		width: 18rpx;
		height: 18rpx;
		border-radius: 50%;
		background: #fd5554;
	}

	.fuliText {
		margin-left: 25rpx;
	}

	.goto {
		margin-left: auto;
		color: rgb(137, 137, 137);
	}

	.transfer {
		/* height: 800rpx; */
		margin-top: 30rpx;
		padding-bottom: 90rpx;
	}

	.transfer .title {
		font-size: 34rpx;
		font-weight: 600;
		padding: 20rpx 0 0 18rpx;
	}

	.noData {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 170rpx;
	}

	.noDataImg {
		width: 200rpx;
		height: 180rpx;
		margin-bottom: 80rpx;
	}

	.noDataText {
		font-size: 30rpx;
		color: #343434;
	}

	.accountList {
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		padding: 50rpx 0;
		margin-top: 30rpx;
	}

	.accountItem {
		width: 25%;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 0 28rpx;
		color: rgb(127, 127, 127);
		font-size: 26rpx;
		box-sizing: border-box;
		white-space: nowrap;
	}

	.accountItem:nth-child(1) {
		margin-bottom: 30rpx;
	}

	.accountItem image {
		width: 40rpx;
		height: 42rpx;
		margin-bottom: 20rpx;
	}
	.foot_text {
		text-align: center;
		margin-top: 20rpx;
		font-size: 26rpx;
		color: rgb(194, 194, 194);
	}
</style>